<template>
    <div>
        <el-form :inline="true" :model="formUser" size="mini">
            <el-form-item label="用户名">
                <el-input v-model="formUser.userName" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="requestSearchProperty">查询</el-button>
            </el-form-item>
        </el-form>
        <el-tabs v-model="type" @tab-click="handleTabClick">
            <el-tab-pane label="资金账户" name="1">
                <property-list
                        :property-list-data="propertyListData"
                        :user-map-data="userMapData"
                ></property-list>
            </el-tab-pane>
            <el-tab-pane label="理财账户" name="2">
                <property-list
                        :property-list-data="propertyListData"
                        :user-map-data="userMapData"
                ></property-list>
            </el-tab-pane>
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :page-size="pagination.pageSize"
                    :total="pagination.total"
                    :page-sizes="[10, 50, 100]"
                    @size-change="handleSizeChange"
                    @current-change="currentChange"
                    @prev-click="requestGetPropertyList(pagination.prePage)"
                    @next-click="requestGetPropertyList(pagination.nextPage)"
            >
            </el-pagination>
        </el-tabs>

    </div>
</template>

<script>

    import PropertyList from './components/PropertyList'

    let api = '/manager/user';

    export default {
        name: "UserProperty",
        components: {
            PropertyList
        },
        data() {
            return {
                type: '1',
                formUser:{
                    userName:'',
                },
                propertyListData: [],
                userMapData:{},
                pagination: {
                    total: 0,
                    pageSize: 10,
                    prePage: 0,
                    pageNum: 1,
                    nextPage: 0,
                },
            }
        },
        mounted() {
            this.requestGetPropertyList(this.pagination.pageNum)
        },
        methods: {
            requestGetPropertyList(page) {
                this.requestAxios.requestCMS('post', api + '/get_user_balance.do', {
                    page: page,
                    size: this.pagination.pageSize,
                    type: this.type,
                    userName: this.formUser.userName,
                }, (response) => {
                    console.log(111,response)
                    let data = response.data.pageList;
                    this.propertyListData = data.list;
                    this.userMapData = response.data.userMap;
                    this.pagination.total = data.total;
                    this.pagination.prePage = data.prePage;
                    this.pagination.pageNum = data.pageNum;
                    this.pagination.nextPage = data.nextPage;
                });
            },

            requestSearchProperty(){
                this.requestGetPropertyList(1)
            },

            handleTabClick(tab, event) {
                this.type = tab.name;
                this.requestGetPropertyList(this.pagination.pageNum)
            },

            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.requestGetPropertyList(this.pagination.pageNum)
            },
            currentChange(page) {
                this.requestGetPropertyList(page)
            }
        }
    }
</script>

<style scoped>

</style>
